<template>
    <div class="supplier">
        <el-card class="main">
            <!-- 上方按钮 -->
            <div class="supplierBtn">
                <div class="left">
                    <el-button type="success" size="small" @click="addFollow">
                        <i class="el-icon-plus"></i>
                        新增</el-button>
                    <el-button type="info" size="small" @click="resetList">
                        <i class="el-icon-refresh-left"></i>
                        重置</el-button>
                </div>
                <div class="right">
                    <el-input placeholder="请输入内容" class="input-with-select"
                        v-model="searchInput">
                        <el-button slot="append" icon="el-icon-search"
                            @click="normalSearch"></el-button>
                    </el-input>
                </div>

            </div>
            <!-- 供应商跟进列表 -->
            <div class="followList">
                <el-table ref="multipleTable" :data="tableData"
                    tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="sysProviderProgress.progressType"
                        label="类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="sysProviderProgress.head" label="标题"
                        width="120">
                    </el-table-column>
                    <el-table-column prop="sysProvider.name" label="客户"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="sysProviderProgress.providerId"
                        label="联系人" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="sysProviderProgress.userId" label="负责人"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="跟进日期" width="120">
                        <template slot-scope="scope">{{
                            dayjs(scope.row.sysProviderProgress.progressTime).format("YYYY-MM-DD HH: mm: ss")
                                                    }}</template>
                    </el-table-column>
                    <el-table-column label="下次跟进" width="120">
                        <template slot-scope="scope">{{
                            dayjs(scope.row.sysProviderProgress.nextProgressTime).format("YYYY-MM-DD HH: mm: ss")
                                                    }}</template>
                    </el-table-column>
                    <el-table-column label="创建时间" width="120">
                        <template slot-scope="scope">{{
                            dayjs(scope.row.sysProviderProgress.createTime).format("YYYY-MM-DD HH: mm: ss")
                                                    }}</template>
                    </el-table-column>
                    <el-table-column prop="sysProviderProgress.progressStatus"
                        label="状态" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-tag disable-transitions type="primary"
                                v-if="scope.row.sysProviderProgress.progressStatus == 0">新跟进</el-tag>
                            <el-tag disable-transitions type="success"
                                v-if="scope.row.sysProviderProgress.progressStatus == 1">进行中</el-tag>
                            <el-tag disable-transitions type="warning"
                                v-if="scope.row.sysProviderProgress.progressStatus == 2">已完成</el-tag>
                            <el-tag disable-transitions type="info"
                                v-if="scope.row.sysProviderProgress.progressStatus == 3">已取消</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini"
                                @click="goChange(scope.row)">
                                修改
                            </el-button>
                            <el-button type="danger" size="mini"
                                @click="deleteFollow(scope.row.sysProviderProgress.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <Pagination :total="total" :pageSize="pageSize"
                    @getPagination="getPagination"></Pagination>
            </div>
        </el-card>

    </div>
</template>

<script>
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination'
export default {
    name: '',
    components: {
        Pagination
    },
    data() {
        return {
            //分页器
            total: 0,
            currentPage: 1,
            pageSize: 10,
            tableData: [],
            //搜索框
            searchInput: '',

        }
    },
    created() {
        this.getSupplierFollowList(this.currentPage, this.pageSize)
    },
    methods: {
        dayjs,
        //---------------获取供应商列表
        async getSupplierFollowList(currentPage, pageSize) {
            let res = await this.$api.supply.getFollowList({ currentPage, pageSize })
            // console.log(res);
            //供应商列表
            console.log(res.data.data.list);
            if (res.data.code === 200) {
                this.tableData = res.data.data.list;
                //页码
                this.total = res.data.data.total;
            } else {
                console.log('请求失败');
                this.tableData = []
                this.pageSize = 0;
                this.total = 1;
            }
        },
        //--------------获取点击的页码
        getPagination(page) {
            console.log('----', page);
            this.currentPage = page;
            this.getSupplierFollowList(this.currentPage, this.pageSize);
        },
        //-------------重置列表
        resetList() {
            this.getSupplierFollowList(this.currentPage, this.pageSize);
        },
        //进入修改页面
        goChange(row) {
            if (row.sysProviderProgress.progressStatus == 1 || row.sysProviderProgress.progressStatus == 0) {
                this.$router.push({ path: '/supply/editFollow', query: row })
            } else if(row.sysProviderProgress.progressStatus == 2 || row.sysProviderProgress.progressStatus == 3)
            {
                this.$message.error('该状态下无法修改')
            }

        },
        //删除供应商跟进
        deleteFollow(id) {
            this.$confirm('此操作将删除该次跟进, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //执行删除
                this.deleteConfirm(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async deleteConfirm(id) {
            let res = await this.$api.supply.deleteFollowById(id)
            console.log('删除单个跟进接口---', res.data);
            if (res.data.code === 200) {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //更新视图-------------------------
                this.getSupplierFollowList(this.currentPage, this.pageSize)
            } else {
                console.log('删除失败');
                this.$message.error('删除失败');
            }
        },
        //增加跟进
        addFollow() {
            this.$router.push('/supply/addFollow')
        },
        //搜索
        async normalSearch() {
            let res = await this.$api.supply.searchFollow(this.currentPage, this.pageSize, this.searchInput);
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            console.log(res);
        }
    }
}
</script>
<style scoped lang="less">
.supplier {
    .main {
        background-color: rgba(128, 128, 128, 0.1);

        .supplierBtn {
            border-top: 3px solid #ccc;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 5px 10px;
            background-color: #fff;
        }
    }
}</style>